/**
* 左边菜单
*/ 
<template>
  <el-menu
    default-active="1"
    class="el-menu-vertical-demo"
    background-color="#334157"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <div class="logobox">
      <img
        class="logoimg"
        src="../assets/img/logo3.png"
        alt=""
      />
    </div>

    <el-submenu
      :index="item.id + ''"
      v-for="(item, index) in menulist"
      :key="index"
    >
      <template slot="title">
        <i :class="item.icon"></i>
        <span>{{ item.name }}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item
          :index="subMenu.id + ''"
          @click="handlerMenu(subMenu.href)"
          v-for="(subMenu, index) in item.children"
          :key="index"
          >{{ subMenu.name }}</el-menu-item
        >
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      menulist: [],
    };
  },
  methods: {
    handlerMenu(url) {
      this.$router.push(url);
    },
  },
  mounted() {
    this.menulist = JSON.parse(sessionStorage.getItem("menuList"));
  },

  // 创建完毕状态(里面是操作)
  // created() {
  //   // 获取图形验证码
  //   let res = {
  //     success: true,
  //     data: [
  //       {
  //         menuid: 71,
  //         icon: 'li-icon-xitongguanli',
  //         menuname: '人员管理',
  //         hasThird: null,
  //         url: null,
  //         menus: [
  //           {
  //             menuid: 72,
  //             icon: 'icon-cus-manage',
  //             menuname: '用户管理',
  //             hasThird: 'N',
  //             url: 'system/user',
  //             menus: null
  //           },
  //           {
  //             menuid: 75,
  //             icon: 'n-promotion-manage',
  //             menunamicoe: '巡检员管理',
  //             hasThird: 'N',
  //             url: 'system/Inspector',
  //             menus: null
  //           },
  //         ]
  //       },
  //       {
  //         menuid: 152,
  //         icon: 'li-icon-shangchengxitongtubiaozitihuayuanwenjian91',
  //         menuname: '车辆管理',
  //         hasThird: null,
  //         url: null,
  //         menus: [
  //           {
  //             menuid: 175,
  //             icon: 'icon-provider-manage',
  //             menuname: '车辆管理',
  //             hasThird: 'N',
  //             url: 'TCar/Tcar',
  //             menus: null
  //           }
  //         ]
  //       },
  //       {
  //         menuid: 153,
  //         icon: 'li-icon-shangchengxitongtubiaozitihuayuanwenjian91',
  //         menuname: '路段管理',
  //         hasThird: null,
  //         url: null,
  //         menus: [
  //           {
  //             menuid: 175,
  //             icon: 'icon-provider-manage',
  //             menuname: '路段管理',
  //             hasThird: 'N',
  //             url: 'TSection/section',
  //             menus: null
  //           }
  //         ]
  //       },
  //       {
  //         menuid: 154,
  //         icon: 'li-icon-dingdanguanli',
  //         menuname: '订单管理',
  //         hasThird: null,
  //         url: null,
  //         menus: [
  //           {
  //             menuid: 179,
  //             icon: 'icon-provider-manage',
  //             menuname: '订单管理',
  //             hasThird: 'N',
  //             url: 'TOrderItem/OrderItem',
  //             menus: null
  //           },{
  //             menuid: 180,
  //             icon: 'icon-provider-manage',
  //             menuname: '异常订单管理',
  //             hasThird: 'N',
  //             url: 'TOrderItem/UnusnalOrderManagement',
  //             menus: null
  //           }
  //         ]
  //       },{
  //         menuid: 158,
  //         icon: 'li-icon-shangchengxitongtubiaozitihuayuanwenjian91',
  //         menuname: '设备管理',
  //         hasThird: null,
  //         url: null,
  //         menus: [
  //           {
  //             menuid: 183,
  //             icon: 'icon-provider-manage',
  //             menuname: '地磁管理',
  //             hasThird: 'N',
  //             url: 'TGeo/TGeo',
  //             menus: null
  //           }
  //         ]
  //       }
  //     ],
  //     msg: 'success'
  //   }
  //         this.allmenu = res.data
  //   this.$root.Bus.$on('toggle', value => {
  //     this.collapsed = !value
  //   })
  // }
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
  text-align: left;
}
.el-menu-item-group__title {
  padding: 0px;
}
.el-menu-bg {
  background-color: #1f2d3d !important;
}
.el-menu {
  border: none;
}
.logobox {
  height: 40px;
  line-height: 40px;
  color: #9d9d9d;
  font-size: 20px;
  text-align: center;
  padding: 20px 0px;
}
.logoimg {
  height: 40px;
}
</style>